<template>
    <div
        class="page_root"
        :key="queryUpdateFlag"
        data-page-name="客户满意度管理"
        data-page-identification="x_fgqwv8kctt"
    >
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!--            查看评价说明-->
            <a-modal
                :visible="state.tipVisible"
                :title="state.currentTitle + '评分说明'"
                centered
                :footer="null"
                @cancel="state.tipVisible = false"
            >
                <div class="start-body">
                    <ul class="tip-list">
                        <li v-for="item in state.currentTipList" :key="item.fraction" class="tip-item">
                            <a-rate :value="item.fraction" :count="5" disabled />
                            <div>{{ item.fractionDescribe }}</div>
                        </li>
                    </ul>
                </div>
            </a-modal>

            <!--            查看评价说明-->
            <!--            编辑弹窗-->
            <a-modal
                :visible="state.editVisible"
                title="编辑客户满意度"
                centered
                @ok="handleSubmit"
                @cancel="cancelEdit"
                width="900px"
                :ok-button-props="{ loading: state.submitLoading }"
            >
                <div class="edit-form">
                    <a-form :model="state.editForm" ref="editRef">
                        <a-row :gutter="24">
                            <a-col :span="12">
                                <a-form-item label="区域名称">
                                    <a-select
                                        v-model:value="state.editForm.areaName"
                                        :placeholder="selectHolder"
                                        disabled
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="工厂名称">
                                    <a-select
                                        v-model:value="state.editForm.factoryName"
                                        disabled
                                        :placeholder="selectHolder"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="产品线">
                                    <a-select
                                        v-model:value="state.editForm.productLineName"
                                        :placeholder="selectHolder"
                                        disabled
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <div class="bottom-tip deep-font mg16 flex"><div> 验收配合意愿度 </div></div>
                            </a-col>
                            <a-col :span="24">
                                <a-radio-group v-model:value="state.editForm.acceptanceCooperationFraction">
                                    <a-row class="mg16">
                                        <a-col
                                            v-for="item in state.scoreOptions['验收配合意愿度']"
                                            :key="item.fraction"
                                            :span="12"
                                            class="mg16"
                                        >
                                            <a-radio :value="item.fraction">{{ item.fractionDescribe }}</a-radio>
                                        </a-col>
                                    </a-row>
                                </a-radio-group>
                            </a-col>
                            <a-col :span="24">
                                <div class="bottom-tip deep-font mg16 flex"><div> 共创共建意愿度 </div></div>
                            </a-col>
                            <a-col :span="24">
                                <a-radio-group v-model:value="state.editForm.coCreationFraction">
                                    <a-row class="mg16">
                                        <a-col
                                            v-for="item in state.scoreOptions['共创共建意愿度']"
                                            :key="item.fraction"
                                            :span="12"
                                            class="mg16"
                                        >
                                            <a-radio :value="item.fraction">{{ item.fractionDescribe }}</a-radio>
                                        </a-col>
                                    </a-row>
                                </a-radio-group>
                            </a-col>
                            <a-col :span="24">
                                <div class="bottom-tip deep-font mg16 flex"><div> 新业务拓展意愿度</div></div>
                            </a-col>
                            <a-col :span="24">
                                <a-radio-group v-model:value="state.editForm.businessDevelopmentFraction">
                                    <a-row class="mg16">
                                        <a-col
                                            v-for="item in state.scoreOptions['新业务拓展意愿度']"
                                            :key="item.fraction"
                                            :span="12"
                                            class="mg16"
                                        >
                                            <a-radio :value="item.fraction">{{ item.fractionDescribe }}</a-radio>
                                        </a-col>
                                    </a-row>
                                </a-radio-group>
                            </a-col>
                            <a-col :span="24">
                                <div class="bottom-tip deep-font mg16 flex"><div> 项目周期零投诉 </div></div>
                            </a-col>
                            <a-col :span="24">
                                <a-radio-group v-model:value="state.editForm.zeroComplaintsFraction">
                                    <a-row class="mg16">
                                        <a-col
                                            v-for="item in state.scoreOptions['项目周期零投诉']"
                                            :key="item.fraction"
                                            :span="12"
                                            class="mg16"
                                        >
                                            <a-radio :value="item.fraction">{{ item.fractionDescribe }}</a-radio>
                                        </a-col>
                                    </a-row>
                                </a-radio-group>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </a-modal>
            <!--            编辑弹窗-->
            <!-- begin vid_ofo2f6vmf7 自定义模板_n8mu4tnwha -->
            <div class="body">
                <div class="top-search">
                    <a-row :gutter="24">
                        <a-col :span="5">
                            <a-form-item label="区域名称" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                <a-select
                                    :options="state.areaList"
                                    show-search
                                    v-model:value="state.filter.areaCode"
                                    :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                    :placeholder="selectHolder"
                                    allow-clear
                                    @change="
                                        () => {
                                            pagination.current = 1
                                            pagination.pageSize = 100
                                            getData()
                                        }
                                    "
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="5">
                            <a-form-item label="客成经理" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                <a-select
                                    allow-clear
                                    show-search
                                    :options="state.allUser"
                                    v-model:value="state.filter.customerManager"
                                    :filter-option="
                                        (input, option) => {
                                            return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                    :field-names="{ label: 'name', value: 'name' }"
                                    :placeholder="selectHolder"
                                    @change="
                                        () => {
                                            pagination.current = 1
                                            pagination.pageSize = 100
                                            getData()
                                        }
                                    "
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="5">
                            <a-form-item label="评价状态" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                <a-select
                                    allow-clear
                                    show-search
                                    :options="[
                                        {
                                            label: '待评价',
                                            value: '0'
                                        },
                                        {
                                            label: '已评价',
                                            value: '1'
                                        }
                                    ]"
                                    :placeholder="selectHolder"
                                    v-model:value="state.filter.evaluationStatus"
                                    :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                    @change="
                                        () => {
                                            pagination.current = 1
                                            pagination.pageSize = 100
                                            getData()
                                        }
                                    "
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="5">
                            <a-form-item label="产品线" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                <a-select
                                    allow-clear
                                    show-search
                                    :options="state.productLineList"
                                    :placeholder="selectHolder"
                                    v-model:value="state.filter.productLine"
                                    :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                    @change="
                                        () => {
                                            pagination.current = 1
                                            pagination.pageSize = 100
                                            getData()
                                        }
                                    "
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="4" style="display: flex; justify-content: end; align-items: start">
                            <a-button type="primary" @click="resetData" ghost>重置</a-button>
                        </a-col>
                    </a-row>
                </div>
                <div class="main">
                    <!--                    <div class="table-tip">-->
                    <!--                        <div class="left-top">-->
                    <!--                            <div class="tip-title">区域列表</div>-->
                    <!--                        </div>-->
                    <!--                       -->
                    <!--                    </div>-->
                    <a-radio-group v-model:value="state.radioValue" button-style="solid" style="margin-bottom: 24px">
                        <a-radio-button value="表格">表格</a-radio-button>
                        <a-radio-button value="图表">图表</a-radio-button>
                    </a-radio-group>
                    <div class="kb-table-box" v-if="state.radioValue === '表格'">
                        <a-table
                            :columns="columns"
                            :data-source="state.dataSource"
                            bordered
                            :pagination="pagination"
                            :scroll="{ y: state.tableHeight }"
                            :loading="state.tableLoading"
                            @change="handleTableChange"
                        >
                            <template #headerCell="{ column, title }">
                                <template v-if="title === '验收配合意愿度'">
                                    <div class="table-title">
                                        <div>{{ title }}</div>
                                        <div class="tip-icon" @click="getTip(title)"></div>
                                    </div>
                                </template>
                                <template v-if="title === '共创共建意愿度'">
                                    <div class="table-title">
                                        <div>{{ title }}</div>
                                        <div class="tip-icon" @click="getTip(title)"></div>
                                    </div>
                                </template>
                                <template v-if="title === '新业务拓展意愿度'">
                                    <div class="table-title">
                                        <div>{{ title }}</div>
                                        <div class="tip-icon" @click="getTip(title)"></div>
                                    </div>
                                </template>
                                <template v-if="title === '项目周期零投诉'">
                                    <div class="table-title">
                                        <div>{{ title }}</div>
                                        <div class="tip-icon" @click="getTip(title)"></div>
                                    </div>
                                </template>
                            </template>
                            <template #bodyCell="{ record, text, column, index }">
                                <template v-if="column.dataIndex === 'operation'">
                                    <a-button
                                        v-permission="'3000001147_vid_3w20zrbiiz'"
                                        type="link"
                                        size="small"
                                        @click="handleEdit(record)"
                                        >{{ record.total ? '编辑' : '评分' }}</a-button
                                    >
                                </template>
                                <template v-if="column.dataIndex === 'status'">
                                    <div v-if="record.id" class="done-div">已评价</div>
                                    <div v-else class="no-done-div">待评价</div>
                                </template>
                                <template
                                    v-if="
                                        [
                                            '验收配合意愿度',
                                            '共创共建意愿度',
                                            '新业务拓展意愿度',
                                            '项目周期零投诉'
                                        ].includes(column.title)
                                    "
                                >
                                    <a-rate v-model:value="record[column.dataIndex]" disabled />
                                </template>
                            </template> </a-table
                    ></div>

                    <div class="echarts-box" v-else>
                        <a-spin :spinning="state.chartLoading" tip="加载中">
                            <div v-for="(groupItems, region) in groupedData" :key="region" class="region-block">
                                <div class="region-title">{{ region }}</div>
                                <div class="card-grid">
                                    <div class="echart-card" v-for="item in groupItems" :key="item.key">
                                        <div class="card-header">
                                            <div class="row">
                                                <span class="title-font"> 工厂简称： </span>
                                                <strong class="content-font" :title="item.factoryShortName">
                                                    {{ item.factoryShortName }}
                                                </strong>
                                            </div>
                                            <div class="row second-row">
                                                <span class="title-font">
                                                    产品线：
                                                    <strong class="content-font" :title="item.productLineName">
                                                        {{ item.productLineName }}
                                                    </strong>
                                                </span>
                                                <span class="title-font">
                                                    客成经理：
                                                    <strong class="content-font" :title="item.customerManager">
                                                        {{ item.customerManager }}
                                                    </strong>
                                                </span>
                                            </div>
                                        </div>
                                        <div :id="`radar-chart-${item.id}`" class="radar-chart"></div>
                                    </div>
                                </div>
                            </div>
                        </a-spin>
                    </div>
                </div>
            </div>
            <!-- end vid_ofo2f6vmf7 自定义模板_n8mu4tnwha -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    const headerOffset = ref(220)
    const topHeightNum = ref()
    const calcTableHeight = () => {
        let topHeight = document.querySelector('.top-classification')
        state.tableHeight = window.innerHeight - 170 - headerOffset.value
    }

    onMounted(() => {
        calcTableHeight()
        window.addEventListener('resize', calcTableHeight)
    })
    onBeforeUnmount(() => {
        window.removeEventListener('resize', calcTableHeight)
    })
    const selectHolder = '请选择'
    import { nextTick } from 'vue'
    import * as echarts from 'echarts'
    onMounted(() => {
        getAllUser()
        getArea()
        getProductLineList()
        getData()
    })

    const state = reactive({
        filter: {
            areaCode: undefined,
            customerManager: undefined,
            evaluationStatus: undefined
        },
        tableHeight: 600,
        dataSource: [],
        chartDataSource: [],
        allUser: [],
        areaList: [],
        productLineList: [],
        radioList: [],
        scoreOptions: {
            fraction: undefined,
            fractionDescribe: undefined
        },
        radioValue: '表格',
        editForm: {},
        editVisible: false,
        tableLoading: false,
        chartLoading: false,
        submitLoading: false,
        tipVisible: false,
        currentTitle: undefined,
        currentTipList: []
    })

    const columns = ref([
        {
            'title': '区域',
            'dataIndex': 'areaName',
            ellipsis: true,
            fixed: 'left',
            width: 200,
            align: 'left'
        },
        {
            title: '工厂简称',
            dataIndex: 'factoryShortName',
            ellipsis: true,
            fixed: 'left',
            width: 200,
            align: 'left'
        },
        {
            title: '工厂全称',
            dataIndex: 'factoryName',
            ellipsis: true,
            fixed: 'left',
            width: 200,
            align: 'left'
        },
        {
            title: '产品线',
            dataIndex: 'productLineName',
            ellipsis: true,
            width: 200,
            align: 'left'
        },
        {
            title: '客成经理',
            dataIndex: 'customerManager',
            align: 'center',
            width: 90,
            ellipsis: true
        },
        {
            title: '评价状态',
            dataIndex: 'status',
            align: 'center',
            width: 90,
            ellipsis: true
        },
        {
            title: '验收配合意愿度',
            dataIndex: 'acceptanceCooperationFraction',
            align: 'center',
            width: 160,
            ellipsis: true
        },
        {
            title: '共创共建意愿度',
            dataIndex: 'coCreationFraction',
            align: 'center',
            width: 160,
            ellipsis: true
        },
        {
            title: '新业务拓展意愿度',
            dataIndex: 'businessDevelopmentFraction',
            align: 'center',
            width: 180,
            ellipsis: true
        },
        {
            title: '项目周期零投诉',
            dataIndex: 'zeroComplaintsFraction',
            align: 'center',
            width: 160,
            ellipsis: true
        },
        {
            title: '总分',
            dataIndex: 'total',
            align: 'center',
            width: 80,
            ellipsis: true,
            sorter: (a, b) => a.total - b.total, // 排序逻辑：升序
            sortOrder: computed(() => (sorterInfo.value.field === 'total' ? sorterInfo.value.order : null)),
            sortDirections: ['descend', 'ascend'] // 可选，显示两个排序方向
        },
        {
            title: '操作',
            dataIndex: 'operation',
            fixed: 'right',
            align: 'center',
            ellipsis: true,
            width: 80
        }
    ])
    function getAllUser() {
        get('/solution-crm/api/v1/base_data/customer_success_team_member').then(data => {
            if (data.status !== 'success') {
                message.error(data.errorMsg)
                return
            }
            state.allUser = data.data
        })
    }
    function getArea() {
        get('/solution-crm/api/v1/satisfaction/area').then(data => {
            if (data.status !== 'success') {
                message.error(data.errorMsg)
                return
            }
            state.areaList = data.data.map(item => {
                return {
                    label: item.areaName,
                    value: item.areaCode
                }
            })
        })
    }
    function getProductLineList() {
        get('/solution-ppm-basic-data/api/v1/product_line/all').then(data => {
            if (data.code !== 200) {
                state.productLineList = []
                return
            }
            state.productLineList = data.data.map(item => {
                return {
                    label: item.productLineName,
                    value: item.productLineCode
                }
            })
        })
    }

    const pagination = ref({
        current: 1,
        pageSize: 100,
        showSizeChanger: true,
        total: 0,
        pageSizeOptions: ['10', '20', '40', '60', '80', '100'],
        showTotal: total =>
            `共 ${total} 个项目 第 ${pagination.value.current}/${Math.ceil(total / pagination.value.pageSize)}页`
    })
    const handleTableChange = (paginationInfo, filters, sorter) => {
        pagination.value.current = paginationInfo.current
        pagination.value.pageSize = paginationInfo.pageSize
        sorterInfo.value = {
            order: sorter.order || null,
            field: sorter.field || null
        }
        getData()
    }
    function getData() {
        state.tableLoading = true
        post('/solution-crm/api/v1/satisfaction/search', {
            pageNumber: pagination.value.current,
            pageSize: pagination.value.pageSize,
            ...state.filter
        })
            .then(data => {
                if (data.status !== 'success') {
                    message.error(data.errorMsg)
                    return
                }
                state.dataSource = data.data.content.map(item => {
                    return {
                        ...item,
                        total:
                            item.businessDevelopmentFraction +
                            item.coCreationFraction +
                            item.zeroComplaintsFraction +
                            item.acceptanceCooperationFraction
                    }
                })
                pagination.value.total = data.data.totalElements
                if (state.radioValue === '图表') {
                    nextTick(() => {
                        setupLazyLoad()
                    })
                }
            })
            .finally(() => {
                state.tableLoading = false
            })
    }
    const sorterInfo = ref({
        order: null, // 'ascend' | 'descend' | null
        field: null
    })
    function resetData() {
        state.filter.areaCode =
            state.filter.customerManager =
            state.filter.evaluationStatus =
            state.filter.productLine =
                undefined
        pagination.value.current = 1
        // ✅ 清空排序状态
        sorterInfo.value = { order: null, field: null }

        getData()
    }
    const currentData = ref({})
    function handleEdit(record) {
        let data = cloneDeep(record)
        currentData.value = data
        Object.assign(state.editForm, data)
        get('/solution-crm/api/v1/satisfaction/fraction').then(data => {
            state.scoreOptions = data.data
        })
        state.editVisible = true
    }
    function handleSubmit() {
        state.submitLoading = true
        put('/solution-crm/api/v1/satisfaction', state.editForm)
            .then(data => {
                if (data.status !== 'success') {
                    message.error(data.errorMsg)
                    return
                }
                message.success('操作成功')
                cancelEdit()
                getData()
            })
            .finally(() => {
                state.submitLoading = false
            })
    }
    function cancelEdit() {
        state.editVisible = false
    }

    let observer = null
    const chartRefs = ref([]) // 用于绑定 DOM
    let chartInstances: echarts.ECharts[] = []
    const groupedData = computed(() => {
        const map: Record<string, typeof state.dataSource> = {}
        for (const item of state.dataSource) {
            if (!map[item.areaName]) {
                map[item.areaName] = []
            }
            map[item.areaName].push(item)
        }
        return map
    })

    // ECharts 指标字段
    const radarIndicators = [
        { name: '验收配合', max: 5 },
        { name: '共创共建', max: 5 },
        { name: '新业务拓展', max: 5 },
        { name: '零投诉', max: 5 }
    ]

    // 切换为图表时，延迟分批渲染
    watch(
        () => state.radioValue,
        val => {
            if (val === '图表') {
                nextTick(() => {
                    setupLazyLoad()
                })
            } else {
                getData()
                cleanupCharts()
            }
        }
    )
    function setupLazyLoad() {
        cleanupCharts()
        observer = new IntersectionObserver(
            entries => {
                for (const entry of entries) {
                    if (entry.isIntersecting) {
                        const id = entry.target.id.replace('radar-chart-', '')
                        if (!id) continue
                        const item = state.dataSource.find(d => String(d.id) === id)
                        if (item && !chartInstances[item.id]) {
                            renderRadarChart(item)
                            observer?.unobserve(entry.target)
                        }
                    }
                }
            },
            { threshold: 0.1 }
        )

        state.dataSource.forEach(item => {
            if (!item.id) return
            const el = document.getElementById(`radar-chart-${item.id}`)
            if (el) {
                observer?.observe(el)
            }
        })
    }

    function renderRadarChart(item) {
        console.log(item, 'itemsssssssssssssss')
        const dom = document.getElementById(`radar-chart-${item.id}`)
        if (!dom) return
        const chart = echarts.init(dom)
        chart.setOption({
            tooltip: {
                formatter: function (params) {
                    return (
                        `${params.name}<br/>` +
                        params.value.map((v, i) => `${radarIndicators[i].name}：${v} 分`).join('<br/>')
                    )
                }
            },
            radar: { indicator: radarIndicators },
            series: [
                {
                    type: 'radar',
                    data: [
                        {
                            value: [
                                item.acceptanceCooperationFraction,
                                item.coCreationFraction,
                                item.businessDevelopmentFraction,
                                item.zeroComplaintsFraction
                            ],
                            name: item.factoryShortName
                        }
                    ]
                }
            ]
        })
        chartInstances[item.id] = chart
    }

    function cleanupCharts() {
        Object.values(chartInstances).forEach(chart => chart.dispose())
        Object.keys(chartInstances).forEach(k => delete chartInstances[k])
        if (observer) {
            observer.disconnect()
            observer = null
        }
    }
    function checkBtn(record) {
        if (record.a || record.b || record.c || record.d) {
            return true
        } else {
            return false
        }
    }
    const scoreTipsMap = ref({})
    function getTip(title) {
        get('/solution-crm/api/v1/satisfaction/fraction').then(data => {
            scoreTipsMap.value = data.data
            const list = scoreTipsMap.value[title] || []
            state.currentTitle = title
            state.currentTipList = list
            state.tipVisible = true
        })
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    /*样式*/
    .body {
        height: 100%;
    }
    .page_root {
        overflow: hidden;
    }
    .top-search {
        background-color: #fff;
        padding: 24px 24px 0 24px;
        border-radius: 4px;
    }
    .main {
        margin-top: 16px;
        border-radius: 4px;
        padding: 20px 24px;
        height: 100%;
        background-color: #fff;
        overflow: hidden;
    }
    .table-tip {
        background-color: #fff;
        display: flex;
        height: 45px;
        justify-content: space-between;
        align-items: center;
        position: relative;
        margin-bottom: 24px;
    }
    .tip-title {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
        line-height: 16px;
        padding-left: 8px;
        border-left: 4px solid #3875ff;
        height: 16px;
    }
    .title-font {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
    }

    .kb-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 8px 16px;
        border-right: 1px solid #d9d9d9 !important;
        position: relative;
    }
    .kb-table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
        word-break: break-all;
    }
    .mg16 {
        margin-bottom: 16px;
    }
    .bottom-tip {
        height: 14px;
        line-height: 14px;
        border-left: 2px solid #3875ff;
        padding-left: 6px;
        display: flex;
        gap: 40px;
    }
    .deep-font {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
    }
    .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* 如果需要多行排列雷达图，可以添加以下样式 */
    .echarts-box {
        height: calc(100% - 150px);
        overflow: auto;
        padding: 0 4px;
    }

    .radar-chart {
        width: 100%;
        height: 100%;
    }
    .region-block {
        margin-bottom: 32px;
    }

    .region-title {
        font-size: 16px;
        color: #000000;
        letter-spacing: 0;
        font-weight: 600;
        padding-left: 8px;
        border-left: 4px solid #3875ff;
        height: 16px;
        line-height: 16px;
        margin-bottom: 16px;
    }

    .card-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
    }

    .echart-card {
        width: calc((100% - 72px) / 4); /* gap: 24px * (4 - 1) = 72px */
        border-radius: 8px;
        box-sizing: border-box;
        background: #ffffff;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
        border-radius: 8px;
    }

    .card-header {
        font-size: 14px;
        color: #666;
        padding: 14px 24px;
        background-image: linear-gradient(-83deg, rgba(105, 173, 255, 0.1) 0%, rgba(56, 117, 255, 0.1) 100%);
        border-radius: 4px 4px 0 0;
        display: flex;
        flex-direction: column; /* 主轴改为垂直 */
        gap: 6px; /* 行间距可调 */
    }

    .row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .second-row {
        gap: 24px;
    }

    .title-font {
        display: inline-block;
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 超出隐藏 */
        text-overflow: ellipsis; /* 超出显示省略号 */
        max-width: 50%; /* 设置合适宽度以便省略号出现 */
    }
    .radar-chart {
        width: 100%;
        height: 300px;
        padding: 10px;
    }

    .content-font {
        font-size: 14px;
        color: #3875ff;
        letter-spacing: 0;
        font-weight: 500;
    }
    .table-title {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }
    .tip-icon {
        width: 14px;
        height: 14px;
        background-image: url('http://10.40.0.33:9001/file-storage/518159028275458048-source.png');
        background-size: cover;
        cursor: pointer;
    }
    .tip-list {
        padding-left: 0;
        list-style: none;
    }
    .tip-list li {
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 1.5;
    }
    .done-div {
        background: rgba(82, 196, 26, 0.1);
        border: 1px solid #52c41a;
        border-radius: 2px;
        font-size: 14px;
        color: #52c41a;
        font-weight: 400;
        padding: 1px 8px;
    }
    .no-done-div {
        background: rgba(216, 216, 216, 0.1);
        border: 1px solid #d8d8d8;
        border-radius: 2px;
        font-size: 14px;
        color: #8c8c8c;
        font-weight: 400;
        padding: 1px 8px;
    }
    .edit-form :deep(.ant3-form-item-label) {
        width: 100px;
    }
    /*样式*/
</style>
